<template>
  <div class="task-all-con table-gl-w">
    <div class="search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <!-- <div>合计任务：9条 合计任务费用：￥1650 </div> -->
        </template>
        <template #tableBody>
          <a-table size="mini" :summary="summary" :bordered="{ headerCell: true }" class="table-two-line" @sorter-change="sortChange" :data="tableList" :loading="loading" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <a-table-column title="序号" #cell="{ rowIndex }" :width="50">{{ rowIndex + 1 }}</a-table-column>
              <a-table-column title="日期" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'] }" data-index="gmtFinish">
                {{ $setTime(record.gmtFinish, 'YYYY-MM-DD') }}
              </a-table-column>
              <a-table-column title="执行人" #cell="{ record }" :width="100">{{ record.executerName }}</a-table-column>
              <a-table-column title="部门" #cell="{ record }" :width="100">{{ record.executerDeptName }}</a-table-column>
              <a-table-column title="任务数" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'] }" data-index="taskNum">
                {{ record.taskNum }}
              </a-table-column>
              <a-table-column title="任务项目数" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'] }" data-index="taskItemNum">
                {{ record.taskItemNum }}
              </a-table-column>
              <a-table-column title="金额" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'] }" data-index="amtbService">
                {{ record.amtbService }}
              </a-table-column>
            </template>
            <template #summary-cell="{ column, record, rowIndex }">
              <div>{{ record[column.dataIndex] }}</div>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue'
  import { getOrganizesUser } from '@/api/system'
  // import { findTaskExecuterStatPage } from '@/api/task'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import _ from 'lodash-es'

  const typeMap = {
    NEW_PRODUCT_PICTURE: '新品套图',
    QUICK_FIX_PICTURE: '快速修图',
    ORIGINAL_PICTURE: '原图',
    SHOOT_VIDEO: '拍摄视频',
  }

  const filterItem: any = ref([
    {
      key: 'executerId',
      label: '任务执行人',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: [],
      attrs: {
        'allow-clear': true,
      },
    },
    {
      type: 'keyword_date_range',
      key: 'gmtFinish',
      keyItems: [{ label: '完成时间', value: 'gmtFinish' }],
      keyWidth: '110',
      label: '完成时间',
      value: ref(),
      width: 200,
    },
  ])
  let tableList = ref([])
  let loading = ref(false)
  let pageNation = ref({ total: 0, pageNum: 1, pageSize: 20 })
  let searchValue: any = ref({})

  const searchByVal = (info: any) => {
    searchValue.value = _.cloneDeep(info)
    if (searchValue.value.startDate) {
      searchValue.value.startDate = new Date(`${searchValue.value.startDate} 00:00:00`).valueOf()
      searchValue.value.endDate = new Date(`${searchValue.value.endDate} 23:59:59`).valueOf()
    }
    getList()
  }

  const getUser = async () => {
    let params = {
      depart: false,
      needRole: false,
      pageNum: 1,
      pageSize: 1000,
    }
    const res: any = await getOrganizesUser(params)
    let arr = res?.data?.records || []
    filterItem.value[0].optionItems = arr.map((e: any) => {
      return {
        label: e.userName,
        value: e.id,
      }
    })
  }

  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }

  const sortChange = (item: any, extra: any) => {
    if (extra) {
      searchValue.value.sortField = item
      searchValue.value.sortAsc = extra == 'ascend' ? true : false
    } else {
      searchValue.value.sortField = ''
      searchValue.value.sortAsc = ''
    }
    getList()
  }

  const getList = async () => {
    let params = {
      ...searchValue.value,
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
    }
    loading.value = true
    // const res: any = await findTaskExecuterStatPage(params)
    const res: any = {}
    tableList.value = res?.data?.records || []
    pageNation.value.total = res?.data?.total || 0
    loading.value = false
  }

  const summary = () => {
    let countData = {
      taskNum: 0,
      taskItemNum: 0,
      amtbService: 0,
    }
    tableList.value.forEach((record: any) => {
      countData.taskNum += record.taskNum
      countData.taskItemNum += record.taskItemNum
      countData.amtbService += record.amtbService
    })

    return [
      {
        gmtFinish: '合计',
        ...countData,
      },
    ]
  }

  onMounted(() => {
    getList()
    getUser()
  })
</script>

<style lang="less" scoped>
  .task-all-con {
    height: calc(100vh - 240px);
  }
</style>
